<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
  th:with="title='xxs商城',active='home'"
>
  <header>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <script src="../../js/index.js"></script>
    <script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../js/slide.js"></script>
    <style>
      * {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
      body {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
      }
      .tr3 {
        font-family: '微软雅黑';
        font-size: 15px;
        color: #ff3e3e;
      }
      .box {
        margin-top: 6%;
      }
      h1 {
        text-align: center;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        padding: 30px 0;
      }
      /* Table Styles */
      .table-wrapper {
        margin: 50px 70px 70px;

        box-shadow: 0px 35px 50px rgba(0, 0, 0, 0);
      }
      .fl-table {
        border-radius: 5px;
        font-size: 12px;
        font-weight: normal;
        border: none;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        background-color: white;
      }
      .fl-table td,
      .fl-table th {
        text-align: center;
        padding: 8px;
      }
      .fl-table td {
        border-right: 1px solid #f8f8f8;
        font-size: 12px;
      }
      .fl-table thead th {
        color: #ffffff;
        background: #ff3e3e;
      }
      .fl-table thead th:nth-child(odd) {
        color: #ffffff;
        background: #4d605f;
      }
      .fl-table tr:nth-child(even) {
        background: #f8f8f8;
      }
      /* Responsive */
      @media (max-width: 767px) {
        .fl-table {
          display: block;
          width: 100%;
        }
        .table-wrapper:before {
          content: 'Scroll horizontally >';
          display: block;
          text-align: right;
          font-size: 11px;
          color: white;
          padding: 0 0 10px;
        }
        .fl-table thead,
        .fl-table tbody,
        .fl-table thead th {
          display: block;
        }
        .fl-table thead th:last-child {
          border-bottom: none;
        }
        .fl-table thead {
          float: left;
        }
        .fl-table tbody {
          width: auto;
          position: relative;
          overflow-x: auto;
        }
        .fl-table td,
        .fl-table th {
          padding: 20px 0.625em 0.625em 0.625em;
          height: 60px;
          vertical-align: middle;
          box-sizing: border-box;
          overflow-x: hidden;
          overflow-y: auto;
          width: 120px;
          font-size: 13px;
          text-overflow: ellipsis;
        }
        .fl-table thead th {
          text-align: left;
          border-bottom: 1px solid #f7f7f9;
        }
        .fl-table tbody tr {
          display: table-cell;
        }
        .fl-table tbody tr:nth-child(odd) {
          background: none;
        }
        .fl-table tr:nth-child(even) {
          background: transparent;
        }
        .fl-table tr td:nth-child(odd) {
          background: #f8f8f8;
          border-right: 1px solid #e6e4e4;
        }
        .fl-table tr td:nth-child(even) {
          border-right: 1px solid #e6e4e4;
        }
        .fl-table tbody td {
          display: block;
          text-align: center;
        }
      }
    </style>
  </header>
  <body>
    <body>
      <div class="header_con">
        <div class="header">
          <div class="welcome fl">欢迎来到xxs商城!</div>
          <div class="fr">
            <div class="login_btn fl" th:if="${session.uaccount} ne null">
              <a href=""> 欢迎您：<em th:text="${session.uaccount}"></em> </a>
              <span>|</span>
              <a href="http://localhost:8896/goods/quit">退出</a>
            </div>
            <div class="login_btn fl" th:if="${session.uaccount} eq null">
              <a href="http://localhost:8893/admin/tologin"> 请您登陆 </a>
            </div>
            <div class="user_link fl">
              <span>|</span>
              <a href="/goods/cartAll">我的购物车</a>
              <span>|</span>
              <a href="/goods/getAllorder">我的订单</a>
            </div>
          </div>
        </div>
      </div>

      <div class="search_bar clearfix">
        <!--        <a th:href="@{'getAll?uaccount='+${session.uaccount}}" class="logo fl"-->
        <!--          ><img src="../../img/logo.png"-->
        <!--        /></a>-->
        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
        <div class="search_con fr">
          <input
            type="text"
            style="background: top"
            class="input_text fl"
            name=""
            placeholder="搜索商品"
          />
          <input type="button" class="input_btn fr" name="" value="搜索" />
        </div>
      </div>

      <div class="box">
        <div class="table-wrapper">
          <form method="get" action="/goods/paygoods">
            <table class="fl-table">
              <thead>
                <tr>
                  <th class="tdone" style="width: 316px">序号</th>
                  <th class="tdtwo">商品名称</th>
                  <th class="tdthree">数量</th>
                  <th class="tdfour">单价</th>
                  <th class="tdfive">小计</th>
                  <th class="tdsix">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr class="trclass" th:each="newgoods:${carts}">
                  <td class="tdone" style="width: 316px">
                    <input
                      style="border: none; display: none"
                      type="text"
                      name="goodid"
                      th:value="${newgoods.goodid}"
                    />
                    <input
                      style="border: none"
                      type="text"
                      name="id"
                      th:value="${newgoods.id}"
                    />
                  </td>
                  <td
                    class="tdtwo"
                    id="name"
                    th:text="${newgoods.goodsname}"
                  ></td>
                  <td class="tdthree">
                    <span class="jiajie">
                      <input
                        type="number"
                        value="1"
                        class="num"
                        name="numaa"
                        min="1"
                        max="99"
                        step="1"
                        th:value="${newgoods.number}"
                        oninput="if(value>99)value=99"
                      />
                    </span>
                  </td>
                  <td class="tdfour">
                    <span class="unit" th:text="${newgoods.price}"></span>
                  </td>
                  <td class="tdfive"><span class="subtal">8</span></td>
                  <td class="tdsix">
                    <a
                      th:href="@{'http://localhost:8896/goods/deleteCart?did='+${newgoods.id}}"
                      >删&nbsp除</a
                    >
                  </td>
                </tr>

                <!-- <tr class="tr3" style="color: #4e4e4e">
                  <td colspan="6" ; class="talast">
                    商品一共
                    <span style="color: #ff3e3e; font-size: 18px"
                      >${newgoods.number}</span
                    >
                    件
                    <p>
                      共计花费<span
                        class="pricetal"
                        style="color: #ff3e3e; font-size: 18px"
                        >{{newgoods.price}}</span
                      >
                      元
                    </p>
                  </td>
                </tr> -->
              </tbody>
            </table>
            <input
              type="submit"
              style="
                border: none;
                height: 40px;
                width: 100px;
                background-color: #ff3e3e;
                font-size: 18px;
                margin-top: 3%;
                font-family: 仿宋;
                color: whitesmoke;
              "
              value="确定购买"
            />
          </form>
        </div>
      </div>
    </body>

    <div class="footer">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2019 北京xxs商城有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </body>
</html>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
  $(document).on('click', '#sendArr', function () {
    // alert(${newgoods})
    var number = $('.num').html()
    var name = $('#name').html()
    var price = $('.subtal').html()
    var list = {}
    $.ajax({
      type: 'get',
      dataType: 'json',
      url: 'http://localhost:8896/goods/paygoods',
      data: {
        gid: gid,
        number: number,
        name: name,
        price: price,
      },
      success: function () {
        console.log('购买成功，在我的订单查看购买记录')
      },
      error: function (data) {
        alert('购买成功，在我的订单查看购买记录')
      },
    })
  })
</script>
